import { Button, Space } from "antd"
import { useHistory } from "react-router"
import * as apis from "../../apis/model"
import useCURD from "../../hooks/useCURD"
import useModeler from "../../hooks/useModeler"
import CommonModalForm from "../../components/common/CommonModalForm"
import CommonTable, { createColumn } from "../../components/common/CommonTable"
import CommonFilterItem from "../../components/common/CommonFilterItem"

const ModelerProcesses = () => {
  const history = useHistory()
  const {
    listData,
    loading,
    handleCreate,
    handleModify,
    handleCancelForm,
    query,
    changeQueryValues,
    doQueryList,
    handleSubmit,
    formVisible,
    formTitle,
    formData
  } = useCURD({
    apis,
    defaultQuery: {
      sort: 'modifiedDesc',
      filter: 'processes',
      modelType: 0
    },
    defaultSubmitValues: {
      modelType: 0
    },
    moduleName: '流程'
  })

  const {
    commonSetting,
    handleDeleteModel,
    cloneIngModel,
    handleClone,
    handleCancelClone,
    handleSubmitClone
  } = useModeler({
    modelType: 0,
    doQueryList
  })

  const columns = [
    ...commonSetting.modelerListColumns,
    createColumn.actions({
      width: 220,
      btns: [
        {
          text: '设计',
          onClick: (rowData) => {
            history.push(`/modeler/processes/design/${rowData.id}`)
          },
          props: {
            type: 'primary',
          }
        },
        {
          text: '预览',
          onClick: (rowData) => {
            history.push(`/modeler/processes/preview/${rowData.id}`)
          }
        },
        {
          type: 'dropdown',
          menus: [
            {
              text: '修改基本信息',
              onClick: handleModify
            },
            {
              text: '复制',
              onClick: handleClone
            },
            {
              text: '删除',
              onClick: handleDeleteModel
            }
          ]
        }
      ]
    })
  ]

  return <div className="page-wrap">
    <CommonModalForm
      title={formTitle}
      visible={formVisible}
      onCancel={handleCancelForm}
      onSubmit={handleSubmit}
      formItems={commonSetting.formItems}
      initValues={formData}
    ></CommonModalForm>
    <CommonModalForm
      title="复制模型"
      visible={!!cloneIngModel.id}
      onCancel={handleCancelClone}
      onSubmit={handleSubmitClone}
      initValues={cloneIngModel}
      formItems={commonSetting.formItems}
    ></CommonModalForm>
    <div className="page-head">
      <Space>
        <Button
          type="primary"
          onClick={handleCreate}
        >创建流程</Button>
      </Space>
      <Space>
        <CommonFilterItem.Select
          field="sort"
          label="排序规则"
          queryValues={query}
          onChangeQueryValues={changeQueryValues}
          options={commonSetting.sortOptions}
        ></CommonFilterItem.Select>
      </Space>
    </div>
    <div className="page-body">
      <CommonTable
        dataSource={listData}
        columns={columns}
        loading={loading}
      ></CommonTable>
    </div>
  </div>
}

export default ModelerProcesses